<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>好友列表</title>
    <link rel="stylesheet" th:href="@{/js/lib/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/js/lib/fontawesome/css/all.min.css}">
    <th:block th:replace="fragments/navbar :: navbar-style"></th:block>
    <style>
        /* 主体内容样式 */
        body {
            background: #f8f9fa;
            -webkit-tap-highlight-color: transparent;
            padding-bottom: env(safe-area-inset-bottom);
        }

        .friends-container {
            max-width: 800px;
            margin: 2rem auto;
            padding: 20px;
        }

        .friend-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            overflow: hidden;
        }

        .friend-card .card-header {
            background: none;
            border-bottom: 1px solid rgba(0,0,0,0.1);
            padding: 15px 20px;
        }

        .friend-item {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.3s ease;
        }

        .friend-item:hover {
            background: #f8f9fa;
        }

        .friend-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .friend-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #6c757d;
        }

        .friend-name {
            font-weight: 500;
            color: #2c3e50;
        }

        .friend-actions {
            display: flex;
            gap: 10px;
        }

        .btn-friend {
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            transition: all 0.3s ease;
        }

        .btn-friend:hover {
            transform: translateY(-2px);
        }

        .add-friend-form {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .add-friend-form input {
            flex: 1;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            padding: 8px 15px;
        }

        .add-friend-form button {
            border-radius: 8px;
            padding: 8px 20px;
        }

        @media (max-width: 768px) {
            .friends-container {
                margin: 1rem;
                padding: 15px;
            }

            .friend-item {
                padding: 12px 15px;
            }

            .friend-actions {
                flex-direction: column;
                gap: 5px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="fragments/navbar :: navbar('好友列表', 'fas fa-users')"></nav>

    <div class="friends-container">
        <!-- 好友列表 -->
        <div class="friend-card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-user-friends me-2"></i>我的好友</h5>
            </div>
            <div id="friendList">
                <!-- 好友列表将通过JavaScript动态加载 -->
            </div>
        </div>

        <!-- 好友请求 -->
        <div class="friend-card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-user-plus me-2"></i>好友请求</h5>
            </div>
            <div id="friendRequests">
                <!-- 好友请求将通过JavaScript动态加载 -->
            </div>
        </div>

        <!-- 添加好友 -->
        <div class="friend-card">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-search me-2"></i>添加好友</h5>
            </div>
            <div class="card-body">
                <div class="add-friend-form">
                    <input type="text" class="form-control" id="friendUsername" 
                           placeholder="输入用户名添加好友">
                    <button class="btn btn-primary" onclick="sendFriendRequest()">
                        <i class="fas fa-plus me-1"></i>发送请求
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/lib/jquery.min.js}"></script>
    <script th:src="@{/js/lib/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/friends.js}"></script>
    <script th:src="@{/js/navbar.js}"></script>
</body>
</html> 